<template>
  <view>
    <u-popup v-model="show" mode="bottom" height="290px" border-radius="20">
      <view style="margin-left: 10px;padding: 10px;">
        <view>
          <span style="font-size: 20px;font-weight: bold">获取你的昵称、头像</span>
        </view>
        <view style="margin-top: 8px;color: grey">
          <span style="font-size: 13px">获取用户头像、昵称，主要用于向用户提供具有辨识度的用户中心界面</span>
        </view>

        <br>

        <u-form>
          <u-form-item label="头像">
            <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
              <image class="avatar" :src="avatarUrlShow" style="height: 50px;width: 50px;margin-right: 230px"></image>
            </button>
          </u-form-item>
          <u-form-item label="昵称">
            <input type="nickname" class="weui-input" placeholder="请输入昵称" @blur="blurname" v-model="nickname"/>
          </u-form-item>
        </u-form>

        <view style="display: flex;margin-top: 5px;margin-left: 10px">
          <u-button size="default" :custom-style="customStyle1" @click="cancel">取消</u-button>
          <u-button size="default" :custom-style="customStyle2" style="margin-left: 10px" @click="updateUserInfo">保存
          </u-button>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script>
const $ = require('../../../utils/api.js');
const API = require('../../../utils/api/user.js').default;
let self;
export default {
  name: "toUserAuth",
  props: {
    openId: {
      type: String,
      default: ''
    },
    currentPage: {
      type: String,
      default: ''
    },
    memberId: {
      type: Number,
      default: 0
    },

  },
  data() {
    return {
      customStyle1: {
        background: '#ffa600 !important',
        color: '#fff !important',
        border: 'none !important'
      },
      customStyle2: {
        background: '#58b4a9 !important',
        color: '#fff !important',
        border: 'none !important'
      },
      nickname: "",
      avatarUrlShow: "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",
      avatarUrl: "",
      show: false
    }
  },
  methods: {
    init() {
      this.show = true
    },
    cancel() {
      //不修改直接跳转
      this.show = false;
      if (this.currentPage === "login") {
        this.$emit("getUser")
      }

    },
    updateUserInfo() {
      //先修改用户的信息再去跳转
      if (!this.nickname) {
        $.$toast('昵称不能为空');
        return
      }
      const self = this;
      let url = ''
      if (this.currentPage === 'login') {
        url = 'member/updateMemberByXcxOpenId'
      } else if (this.currentPage === 'userIndex') {
        url = 'member/updateMemberById'
      }
      $.ajax({
        url: url,
        data: {
          "avatarUrl": self.avatarUrl,
          "nickname": self.nickname,
          "xcxOpenId": self.openId,
          "memberId": self.memberId
        },
        method: 'POST',
        success(res) {
        },
        complete(data) {
        }
      })
      this.show = false
      if (this.currentPage === "login") {
        this.$emit("getUser")
      } else if (this.currentPage === "userIndex") {
        let dataToIndex = {
          "avatarUrl": self.avatarUrl,
          "nickname": self.nickname
        }
        this.$emit("userIndexRefresh", dataToIndex)
      }
    },
    blurname(e) {
      this.nickname = e.detail.value
    },
    onChooseAvatar(e) {
      this.avatarUrlShow = e.detail.avatarUrl
      $.uploadFile("common/upload", e.detail.avatarUrl, null, {
        url: API.updateHeadImgApi,
      }).then((res) => {
        this.avatarUrl = JSON.parse(res.data).data.imgUrl;
      }).catch((err) => {

      })
    },
  }
}
</script>

<style scoped>


</style>
